<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>内容管理</title>
	<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
	<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
	<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
	<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
	<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
	<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
	<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
	<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
	<script src="/res/third/laytpl/template.js"></script>
	<script type="text/javascript" src="/res/third/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="/res/third/ueditor/ueditor.all.js"></script>
	<script type="text/javascript" src="/res/third/ueditor/lang/zh-cn/zh-cn.js"></script>
	<style type="text/css">
		.lpdiv{display: inline-block;float: left;margin-left: 220px;margin-top: 15px;width: 100%;}
		.showimgs{display:inline-block;}
		.delimgas{display:inline-block;margin-left:50px;cursor:pointer;}
		#proTable td {
			padding: 0 5px;
		}
	</style>

</head>
<body>
<div id="app">
	<div class="panel panel-info" style="height: 100%;overflow-y:scroll;">
		<div class="panel-heading">
			<h3 class="panel-title">[#if hotFloor??]编辑[#else]添加[/#if]天天爆品</h3>
		</div>
		<div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" role="form" id="mainForm">
				<input type="hidden" id="floorId" name="id" value="[#if hotFloor??]${hotFloor.id!}[/#if]">
				<div class="form-group" style="margin-top:15px;">
					<label for="title" class="col-sm-2 control-label">所在楼层:</label>
					<div class="col-sm-5">
						<select name="floor">
							[#list allFloors as floors]
							<option value="${floors}" [#if hotFloor?? && hotFloor.floor == floors]selected[/#if]>${floors}</option>
							[/#list]
						</select>
					</div>
				</div>

				<div class="form-group">
					<label for="title" class="col-sm-2 control-label">所属类目:</label>
					<div class="col-sm-5">
						<select name="categoryId" id="categoryId">
							<option value="">请选择</option>
							[#list topCategoryList as cate]
							<option value="${cate.id!}" [#if hotFloor?? && hotFloor.categoryId == cate.id]selected[/#if]>${cate.name!}</option>
							[/#list]
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label" >选择商品:</label>
					<div class="col-sm-10">
						<table id="proTable">
							[#if hotFloor?? && hotFloor.hotProductList?size > 0]
								[#list hotFloor.hotProductList as pro]
								[@row seq="${pro.seq!}" productId="${pro.productId!}" productName="${pro.productName!}" starttime=date_fmt(pro.starttime, "yyyy-MM-dd") endtime=date_fmt(pro.endtime, "yyyy-MM-dd") index="${pro_index}" id="${pro.id!}"/]
								[/#list]
							[#else]
								[@row seq="" productId="" productName="" starttime="" endtime="" index="0"/]
							[/#if]
						</table>
					</div>
				</div>

				<div class="form-group" style="margin-top: 10px;">
					<div style="margin-left:300px;">
						<button onclick="insert();" type="button" class="btn btn-info">立即提交</button>
					</div>
				</div>
			</form>
		</div>

	</div>



	<div style="display: none;width: 600px;" id="providerDiv">
		<div style="border: 1px solid #ddd;padding-bottom: 8px;">
			<div>
				<input style="display: inline-block;width: 160px;height: 30px;margin: 8px;" type="text" class="form-control" id="so_companyname" placeholder="公司/商品名称" name="so_companyname">
				<button type="button" class="btn btn-info btn-xs delbtn" onclick="searchProvider()">查询</button>
			</div>
			<table class="table table-hover table-bordered table-striped table-condensed" id="companyTab" style="margin-bottom: 8px;">
				<tr id="ftr">
					<th width="10%">#</th>
					<th width="30%">商品名称</th>
					<th width="15%">爆品价</th>
					<th width="15%">会员价</th>
					<th width="30%">来源公司</th>
				</tr>
			</table>
			<div style="text-align: right;padding-right: 8px;">
				<button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageUp()">上一页</button>
				<button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageNext()">下一页</button>
			</div>
		</div>
		<input id="pageNo" type="hidden" value="1">
		<input id="pageTotal" type="hidden">
		<input id="so_companyname_back" type="hidden">
	</div>
</div>

<script type="text/html" id="chooseProductTemplate">
	{{each productList as item i}}
	<tr class="record">
		<td align="center"><input name="productId" type="radio" value="{{item.id}}" data-name="{{item.name}}" /></td>
		<td align="center"><a href="http://${WEB_SITE}/offer/{{item.id}}.html" target="_blank">{{item.name}}</a></td>
		<td align="center">{{item.hotPrice}}</td>
		<td align="center">{{item.memberPrice}}</td>
		<td align="center">{{item.companyName}}</td>
	</tr>
	{{/each}}
</script>

<script type="text/html" id="productTemplate">
	[@row seq="" productId="" productName="" starttime="" endtime=""/]
</script>

[#macro row seq productId productName starttime endtime index="1" id="0"]
<tr>
	<td>
		<input type="text" placeholder="序号" name="seq" value="${seq!}" style="width: 45px; text-align: center;">
		[#if id != "0"]<input type="hidden" name="id" value="${id!}">[/#if]
	</td>
	<td>
		<input type="hidden" name="productId" value="${productId!}">
		<input type="text" placeholder="选择商品" value="${productName!}" onclick="chooseProduct(this)" name="productName" style="cursor: pointer;" readonly>
	</td>
	<td>
		<input type="date" placeholder="开始时间" name="starttime" value="${starttime}" required="required"> -
		<input type="date" placeholder="结束时间" name="endtime" value="${endtime}" required="required">
	</td>
	<td>
		<span class="glyphicon glyphicon-plus" style="cursor:pointer" aria-hidden="true" onclick="addProduct(this)"></span>
		[#if index != "0"]
		<span class="glyphicon glyphicon-minus" style="cursor:pointer" aria-hidden="true" onclick="removeProduct(this)"></span>
		[/#if]
	</td>
</tr>
[/#macro]

<script src="/res/third/laytpl/laytpl.js"></script>
<script>
	var shopHotProductIds = [#if shopHotProductIds??]${shopHotProductIds}[#else][][/#if];
	function addProduct(thiz){
		var html = $('#productTemplate').html();
		$(thiz).parents("tr").after(html);
	}

	function removeProduct(thiz){
		var $tr = $(thiz).parents("tr");
		var $id = $tr.find("input[name=id]");
		// 如果存在
		if ($id && shopHotProductIds.indexOf(Number($id.val())) > 0) {
			artDialog.confirm("该爆品已添加到首页爆品中，首页爆品中会同步删除，确认删除？", function(){
				$(thiz).parents("tr").remove();
			});
			return;
		}

		$(thiz).parents("tr").remove();
	}


	//立即提交按钮
	$.each($('#proTable tr'), function(i, v) {
		var $seqInput = $(v).find('input[name$=seq]');
		var $productId = $(v).find('input[name$=productId]');
		$seqInput.prop('name', 'productList[' + i + '].seq');
		$productId.prop('name', 'productList[' + i + '].productId');
	});

	function insert() {
		var floor = $('select[name=floor]').val();
		var categoryId = $('#categoryId').val();
		if(categoryId == '') {
			alert('请选择类目');
			return;
		}
		var isOk = true;
		$.each($('#proTable tr'), function() {
			var productId = $(this).find('input[name$=productId]').val();
			var seq = $(this).find('input[name$=seq]').val();
			var starttime = $(this).find('input[name$=starttime]').val();
			var endtime = $(this).find('input[name$=endtime]').val();
			if(seq == '' || productId == '' || starttime == '' || endtime == '') {
				alert('请输入完整信息');
				isOk = false;
				return false;
			}
		});

		if (!isOk) {
			return;
		}

		// 判断有没有商品在其他楼层 is_hot_product_in_other_floor.do
		var floorId = $("#floorId").val();
		var productIds = $("#proTable").find("input[name$='productId']").map(function(){
			return $(this).val();
		}).toArray();

		$.post("/hotfloor/is_hot_product_in_other_floor.do", {floorId: floorId, productIds: productIds}, function(req){
			if (req.msg) {
				artDialog.alert(req.msg);
			} else {
				submitForm();
			}
		}, "json");

	}

	function submitForm() {
		$.each($('#proTable tr'), function(i, v) {
			var $productId = $(v).find('input[name$=productId]');
			var $seqInput = $(v).find('input[name$=seq]');
			var $starttime = $(v).find('input[name$=starttime]');
			var $endtime = $(v).find('input[name$=endtime]');
			$seqInput.prop('name', 'hotProductList[' + i + '].seq');
			$productId.prop('name', 'hotProductList[' + i + '].productId');
			$starttime.prop('name', 'hotProductList[' + i + '].starttime');
			$endtime.prop('name', 'hotProductList[' + i + '].endtime');
			var $id = $(v).find('input[name$=id]');
			if ($id) {
				$id.prop('name', 'hotProductList[' + i + '].id');
			}
		});

		$.ajax({
			type: "post",
			dataType: "json",
			url: "/hotfloor/saveHotProduct.do",
			data: $("form").serialize(),
			success: function (aj) {
				if (aj.success) {
					location.reload();
					alert(aj.msg);
				}
			}
		});
	}

	var index;
	var dialogAddCom;
	function chooseProduct(obj) {
		if($('#categoryId').val() == '') {
			alert('请先选择类目');
			return;
		}
		// 判断这个爆品有没有加入到首页，有就给个提示，首页会一起变
		var $tr = $(obj).parents("tr");
		var $id = $tr.find("input[name=id]");
		// 如果存在
		if ($id && shopHotProductIds.indexOf(Number($id.val())) > 0) {
			artDialog.confirm("该爆品已与首页爆品关联，如果更换首页会同步改变，确认更换？", function(){
				showChooseDialog(obj);
			});
			return;
		}
		showChooseDialog(obj);
	}

	function showChooseDialog(obj) {
		$thiz = $(obj);
		index = $(obj).parents('tr').index();
		dialogAddCom = art.dialog({
			title: "选择商品",
			lock:true,
			content: document.getElementById('providerDiv'),
			ok: function () {
			$thiz.val();
			var row = $("#companyTab").find("input[name='productId']:checked");
			if (!row) {
				alert("请选择商品");
				return false;
			}
			$thiz.prev().val(row.val());
			$thiz.val(row.attr("data-name"));
			return true;
		},
		cancelVal: '关闭',
				cancel: true
		});
		initProvider(1);
	}

	function initProvider(pageNo,so_companyname){
		art.dialog.post({
			url : '/hotfloor/chooseproduct.do',
			data : {
				pageNo : pageNo,so_companyname:so_companyname, so_categoryFId : $('#categoryId').val()
			},
			success : function(data){
				if(data.success){
					$("#companyTab").find(".record").remove();
					var html = template("chooseProductTemplate", data.attributes);
					$("#companyTab").append(html);
					$("#pageTotal").val(data.attributes.totalPage);
					$("#pageNo").val(data.attributes.pageNo);
					$("#so_companyname_back").val(data.attributes.so_companyname)
				}else{
					error_msg(data.msg , function(){location.reload();});
				}
			}

		},"数据初始化中.... ");

	}

	function sendBackCName(cid,cname){
		$("#proTable tr").eq(index).find('input[name$=productName]').val(cname);
		$('#proTable tr').eq(index).find('input[name$=productId]').val(cid);
		dialogAddCom.close();
	}

	function searchProvider(){
		var so_companyname=$("#so_companyname").val();
		initProvider(1,so_companyname);
	}

	function pageUp(){
		var pageNo=$("#pageNo").val();
		pageNo=parseInt(pageNo);
		if(pageNo!=1){
			pageNo=pageNo-1;
		}
		var so_companyname=$("#so_companyname_back").val();
		initProvider(pageNo,so_companyname);
	}
	function pageNext(){
		var pageNo=$("#pageNo").val();
		var pageTotal=$("#pageTotal").val();
		pageNo=parseInt(pageNo);
		if(pageNo!=pageTotal){
			pageNo=pageNo+1;
		}
		var so_companyname=$("#so_companyname_back").val();
		initProvider(pageNo,so_companyname);
	}

</script>
</body>
</html>
